@import "tailwindcss/base";
@import "tailwindcss/components";

/***
  Custom Tailwind classes
***/

@import "buttons";
@import "animations";
@import "forms";
@import "tabs";
@import "multiselect";

/* Containers */
// .container {
//   @apply max-w-7xl mx-auto;
// }

/* Markdown */
.markdown{
  /* Headings */
  h1 {
    @apply text-2xl mb-2;
  }
  h2 {
    @apply text-xl mb-2;
  }
  h3 {
    @apply text-lg mb-3;
  }
  h4 {
    @apply text-base mb-3;
  }

  /* Lists */
  ol {
    @apply list-decimal list-inside mb-3;
  }
  ul {
    @apply list-disc list-inside mb-3;
  }

  /* Hyperlinks */
  a {
    @apply text-primary;
  }
  a:hover {
    @apply text-primary underline;
  }

  p {
    @apply my-4
  }
  p:first-child {
    @apply mt-0
  }
  p:last-child {
    @apply mb-0
  }

  blockquote {
    @apply py-5 px-6 bg-gray-100 border-l-5 border-gray-300;

    p {
      @apply m-0 p-0;
    }
  }
}

/* Titles */
.title {
  @apply font-extrabold text-gray-900;
}

/* Regular Hyperlink */
.is-link {
  @apply text-primary font-medium leading-5 transition duration-150 ease-in-out;
}
.is-link:hover {
  @apply text-secondary cursor-pointer;
}
.is-link:focus {
  @apply outline-none underline;
}

/* Regular Hyperlink */
.is-link-danger {
  @apply text-red-500 font-medium leading-5 transition duration-150 ease-in-out;
}
.is-link-danger:hover {
  @apply text-red-600;
}
.is-link-danger:focus {
  @apply outline-none underline;
}

/* Muted Hyperlink */
.is-muted-link {
  @apply text-sm text-gray-400 leading-5 transition duration-150 ease-in-out;
}
.is-muted-link:hover {
  @apply text-primary;
}
.is-muted-link:focus {
  @apply outline-none;
}

/* Tags */
.tag {
  @apply inline-block rounded px-2.5 py-0.5 text-xs text-gray-700 bg-gray-200 font-medium;
}

.tag:hover {
  @apply underline;
}

/* Simple Modifiers */
.is-primary {
  @apply bg-primary text-white
}
.is-primary-alt {
  @apply bg-teal-500 text-white
}
.is-warning {
  @apply bg-warning
}
.is-dark {
  @apply bg-gray-800 text-white
}
.is-info {
  @apply bg-info text-white
}

.mako-shadow {
  box-shadow: inset 0 -30px 0 #00D1B2;
}

/* Forum Tag */
.forum-tag {
  @apply px-4 py-1.5 rounded block;
}
.forum-tag:hover {
  @apply bg-gray-100;
}

/* Active Forum Tag */
.forum-tag.is-active {
  @apply bg-primary text-white;
}
.forum-tag.is-active:hover {
  @apply bg-primary text-white;
}
@import "tailwindcss/utilities";
@import "~balloon-css/src/balloon";
